<template>
    <div class="profile-container">
        <div class="profile-header">
            <div class="profile-info">
                <Image class="profile-info-avatar" round fit="cover" src="../other/avatar.png"></Image>
                <span class="profile-info-nickname">小兵良品</span>
            </div>
        </div>
        <Grid :column-num="4" clickable>
            <GridItem icon="balance-list-o" text="全部订单"></GridItem>
            <GridItem icon="paid" text="待付款" badge="3"></GridItem>
            <GridItem icon="sign" text="待收货"></GridItem>
            <GridItem icon="vip-card-o" text="我的优惠券" dot></GridItem>
        </Grid>
        <CellGroup class="action-group" inset>
            <Cell icon="cart-o" title="我的购物车" is-link />
            <Cell icon="like-o" title="我的关注" is-link />
            <Cell icon="clock-o" title="历史记录" is-link />
        </CellGroup>
        <CellGroup class="action-group" inset>
            <Cell icon="home-o" title="返回首页" is-link to="/" />
            <Cell icon="close" is-link clickable title="退出登录" @click="onLogout" />
        </CellGroup>
    </div>
</template>
<script setup name="Profile">
import { Image, Icon, Grid, GridItem, CellGroup, Cell } from 'vant';

import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/user";

const userStore = useUserStore();
const router = useRouter();

function onLogout() {
    userStore.LogOut().then(() => {
        router.push({ path: "/login" });
    });
}
</script>
<style lang="scss" scoped>
.profile-container {

    .action-group {
        margin-top: 10px;
    }

    .profile-header {
        &::before {
            content: '';
            backdrop-filter: blur(1px);
            -webkit-backdrop-filter: blur(1px);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
        }

        width: 375px;
        height: 220px;
        background-image: url("../profile2/background.png");
        background-size: cover;

        display:flex;
        justify-content: center;
        align-items: center;

        .profile-info {
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            color: #f0f0f0;

            &-avatar {
                border: 3px solid #f0f0f0;
                width: 80px;
                height: 80px;
            }

            &-nickname {
                font-size: 20px;
                margin: 7px;
            }

            &-address {
                font-size: 14px;
                margin: 5px 5px 0px 5px;
            }
        }
    }
}
</style>